<template>
	<div class="col-md-10 content">
		<ul id="myTab" class="nav nav-tabs">
			<li v-for="(tab,index) in tab" :class="{active: ind == index}">
				<div class="clearfix">
					<div class="tab-font pull-left" @click="toggleTabs(tab.name,index)">{{tab.tab_name}}</div>
					<div @click="closeTab(tab.name,index)" type="button" class="pull-left navTabsCloseBtn" title="关闭" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></div>
				</div>

			</li>
			
		</ul>
		<keep-alive>
			<first :is="now"></first>
		</keep-alive>
	</div>
</template>

<script type="text/ecmascript-6">
	//导入子组件
	import index from '../webApp/index';
	import unit_manage from '../webApp/base_manage_package/unit_manage/unit_manage';
	import ware_manage from '../webApp/base_manage_package/ware_manage/ware_manage';
	import base_manage from '../webApp/base_manage_package/base_manage/base_manage';
	import client_manage from '../webApp/base_manage_package/client_manage/client_manage';
	import inventory_danger from '../webApp/base_manage_package/inventory_danger/inventory_danger';
	import material_manage from '../webApp/base_manage_package/material_manage/material_manage';
	import product_manage from '../webApp/base_manage_package/product_manage/product_manage';
	import supplier_manage from '../webApp/base_manage_package/supplier_manage/supplier_manage';
	

	export default {
		data() {
			return {
				index: 'index', //默认选中first子组件
				active: 0,
			};
		},
		components: {
			index,
			unit_manage,
			ware_manage,
			base_manage,
			client_manage,
			inventory_danger,
			material_manage,
			product_manage,
			supplier_manage,
		},
		computed: {
			tab() {
				return this.$store.state.tab
			},
			now() {
				return this.$store.state.now
			},
			ind() {
				return this.$store.state.index
			},
			keep(){
				return this.$store.state.keep_alive
			}
		},
		methods: {
			toggleTabs(tabText, i) {
				this.$store.state.now = tabText;
				this.$store.state.index = i;
				this.active = this.$store.state.index;
				this.$store.state.keep_alive=true;
			},
			closeTab(tabText, i) {
				if(i > 0) {
					var show_index = this.$store.state.index;
					var tab = this.$store.state.tab;
					var text = tabText;
					if(show_index == i) {
						text = tab[i - 1].name
						this.$store.state.index = i - 1
						this.$store.state.now = text;
					} else if(show_index > i) {
						this.$store.state.index = i;
					}
					this.$store.state.tab.splice(i, 1);
				}
				this.$store.state.keep_alive=false;
				
			}
		}
	}
</script>